<template>
	<view class="page-body" :class="[app.setCStyle()]">
		<view class="qb-box primarybtn"></view>
		<view class="menu_box ">
			<view class="flex">
				<view class="flex_bd">
					<view class="grid_price ff"><text class="fs40">￥</text>{{account.balance_money}}</view>
					<view class="grid_text">钱包余额</view>
				</view>
				<view  class="flex_bd">
					<view class="grid_price ff">{{account.use_integral}}</view>
					<view class="grid_text">积分余额</view>
				</view>
				<view class="flex_bd">
					<view class="grid_price ff">{{account.bean_value}}</view>
					<view class="grid_text">扶持基金</view>
				</view>
			</view>
			
			
			<view class="grid_menu">
				<u-grid :col="2" :border="false">
					<u-grid-item>
						<view class="money ff">{{withdrawing}}</view>
						<view class="titel">提现中</view>
					</u-grid-item>
					<u-grid-item>
						<view class="money ff">{{account.withdraw_money_total}}</view>
						<view class="titel">累计提现</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view class="gridbox flex" >
			<view class="card-item flex_bd" @click="app.goPage('withdrawLog')">
				<view class="img44">
					<image src="../../../static/public/images/icon_01.png" mode=""></image>
				</view>
				<view class="fs28 mt20">提现记录</view>
			</view>
			<view class="card-item flex_bd" @click="app.goPage('myLog?pageType=balance')">
				<view class="img44">
					<image src="../../../static/public/images/icon_02.png" mode=""></image>
				</view>
				<view class="fs28 mt20">余额明细</view>
			</view>
			<view  class="card-item flex_bd" @click="app.goPage('myLog?pageType=score')">
				<view class="img44">
					<image src="../../../static/public/images/icon_02.png" mode=""></image>
				</view>
				<view class="fs28 mt20">积分明细</view>
			</view>
		</view>
		<view class="gridbox flex" >
			<!-- <view class="card-item flex_bd" @click="app.goPage('rechargeLog')">
				<view class="img44">
					<image src="../../../static/public/images/icon_02.png" mode=""></image>
				</view>
				<view class="fs28 mt20">充值明细</view>
			</view> -->
		
			<view  class="card-item flex_bd" @click="app.goPage('myLog?pageType=bean')">
				<view class="img44">
					<image src="../../../static/public/images/icon_02.png" mode=""></image>
				</view>
				<view class="fs28 mt20">扶持基金明细</view>
			</view>
			<view class="card-item flex_bd" @click="app.goPage('dividendlog')">
				<view class="img44">
					<image src="../../../static/public/images/icon_02.png" mode=""></image>
				</view>
				<view class="fs28 mt20">佣金明细</view>
			</view>
			<view class="card-item flex_bd" @click="app.goPage('transferLog')">
				<view class="img44">
					<image src="../../../static/public/images/icon_02.png" mode=""></image>
				</view>
				<view class="fs28 mt20">转赠明细</view>
			</view>
		</view>
		<view class="p30">
			<button size="default" shape="circle" type="primary" class="mt40 primarybtnB fs32" @click="app.goPage('withdraw')">去提现</button>
			<button size="default" shape="circle" type="primary" class="mt40 primarybtn fs32" @click="app.goPage('transfer')">转赠</button>
			<!-- <button size="default" shape="circle" type="primary" class="mt40 primarybtn" @click="app.goPage('recharge')">去充值</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				setting: {},
				account: {},
				withdrawing: 0,
			}
		},
		onLoad() {

		},
		onShow() {
			this.app.isLogin(this); //强制登陆
			this.setting = uni.getStorageSync("setting");
			this.$u.post('member/api.wallet/getBalanceInfo').then(res => {
				this.account = res.data.account;
				this.withdrawing = res.data.withdrawing;
			});
		},
		onReady() {},
		methods: {}
	}
</script>

<style lang="scss">
	.menu_box {
			border-radius: 10rpx;
			background-color: #FFFFFF;
			padding: 40rpx 0rpx;
			text-align: center;
			.grid_price {
				color: $font-color-dark;
				font-size: 70rpx;
				font-weight: 500;
				text {
					font-size: 40rpx;
				}
			}
			.grid_text {
				font-size: 28rpx;
				color: $font-color-light;
			}
	}

	.qb-box {
		
		padding: 150rpx 0;
	}

	.img44 {
		image {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.gridbox {
		margin: 20rpx 15rpx;

		.card-item {
			margin: 0rpx 10rpx;
			background-color: #ffffff;
			box-shadow: 0px 10rpx 15rpx 0px rgba(188, 188, 188, 0.1);
			border-radius: 20rpx;
			text-align: center;
			padding: 60rpx 0;
		}
	}

	.menu_box {
		background-color: #ffffff;
		box-shadow: 0px 10rpx 15rpx 0px rgba(188, 188, 188, 0.1);
		border-radius: 20rpx;
		margin: 20rpx;
		margin-top: -200rpx;
		padding: 60rpx 0 30rpx 0;
	}

	.grid_menu {
		.u-grid-item {
			line-height: 55rpx;

			.img {
				margin: 0rpx auto;
				margin-bottom: 30rpx;
				background-color: #f9f9f9 !important;
				padding: 30rpx;
			}

			.titel {
				color: $font-color-light;
				font-size: 28rpx;
			}

			.money {
				height: 55rpx;
				margin-top: 30rpx;
				font-weight: 600;
				font-size: 40rpx;

				&::before {
					content: '￥';
					font-size: 24rpx;
				}
			}
		}
	}
</style>
